import dash
from dash import html, Input, Output, State, ALL, dcc
import feffery_antd_components as fac

app = dash.Dash(__name__, suppress_callback_exceptions=True, update_title=None)

app.layout = html.Div(
    [
        # 保存自定义字段信息
        dcc.Store(id='define-fields-name'),

        html.Div(
            fac.AntdResult(
                icon=fac.AntdIcon(
                    icon='fc-globe',
                    style={
                        'fontSize': '90px'
                    }
                ),
                status='info',
                title='在线GeoJSON数据生成器',
                subTitle=fac.AntdButton(
                    '创建新的文件',
                    id={
                        'type': 'button',
                        'index': 'create-file'
                    },
                    size='large',
                    type='primary'
                )
            ),
            id='operation-area',
            style={
                'width': '450px',
                'height': '300px',
                'background': 'white',
                'borderRadius': '8px',
                'boxShadow': '0 0 4px 2px hsl(0deg 0% 69% / 50%)',
                'padding': '10px',
                'position': 'absolute',
                'top': '50%',
                'right': '50%',
                'transform': 'translate(50%, -75%)',
                'zIndex': 999,
                'display': 'flex',
                'justifyContent': 'center',
                'alignItems': 'center',
                'transition': 'all 0.5s ease-in-out'
            }
        )
    ],
    style={
        'padding': '50px'
    }
)

@app.callback(
    [
        Output('operation-area', 'children'),
        Output('operation-area', 'style')
    ],
    Input(
        {
            'type': 'button',
            'index': ALL
        },
        'nClicks'
    ),
    State('operation-area', 'style'),
    prevent_initial_call=True
)
def update_operation_area(_, old_style):

    if dash.ctx.triggered_id.get('index') == 'create-file':
        del old_style['transform']
        return [
            fac.AntdRow(
                [
                    fac.AntdCol(
                        fac.AntdSteps(
                            id='operation-steps',
                            steps=[
                                {'title': '定义字段'},
                                {'title': '添加数据'},
                                {'title': '导出数据'},
                            ],
                            progressDot=True,
                            direction='vertical'
                        ),
                        flex='none',
                        style={
                            'height': '100%'
                        }
                    ),
                    fac.AntdCol(
                        [
                            html.Div(
                                id='current-step-container',
                                style={
                                    'height': '100%',
                                    'borderRadius': '8px',
                                    'background': 'white',
                                    'overflowY': 'auto'
                                }
                            ),

                            fac.AntdButton(
                                fac.AntdIcon(icon='antd-arrow-right'),
                                id='go-next-step',
                                type='primary',
                                shape='circle',
                                style={
                                    'position': 'absolute',
                                    'bottom': '25px',
                                    'right': '25px'
                                }
                            )
                        ],
                        flex='auto',
                        style={
                            'height': '100%',
                            'padding': '15px',
                            'background': 'rgb(242, 243, 248)',
                            'position': 'relative'
                        }
                    ),
                ],
                style={
                    'height': '100%',
                    'width': '100%'
                }
            ),
            {
                **old_style,
                'top': '20px',
                'right': '20px',
                'width': '700px',
                'height': '500px'
            }
        ]

    return dash.no_update


@app.callback(
    Output('operation-steps', 'current'),
    Input('go-next-step', 'nClicks'),
    State('operation-steps', 'current')
)
def go_next_step(n_clicks, current):
    if n_clicks:
        return current + 1

    return 0


@app.callback(
    Output('current-step-container', 'children'),
    Input('operation-steps', 'current'),
    State('define-fields-name', 'data')
)
def step_to_content(current, define_fields_name):
    if isinstance(current, int):
        if current == 0:
            return html.Div(
                [
                    fac.AntdSpace(
                        [
                            fac.AntdInput(
                                defaultValue='id',
                                disabled=True,
                                style={
                                    'width': '250px'
                                }
                            ),
                            fac.AntdButton(
                                '+',
                                id='add-field-button',
                                type='primary',
                                shape='circle'
                            )
                        ],
                        style={
                            'justifyContent': 'center'
                        }
                    )
                ],
                id='define-field-container',
                style={
                    'width': '70%',
                    'margin': '0 auto',
                    'paddingTop': '25px',
                    'display': 'flex',
                    'flexDirection': 'column',
                    'justifyContent': 'center',
                    'gap': '5px',
                    'overflowX': 'hidden'
                }
            )



if __name__ == '__main__':
    app.run(debug=True)
